<template>
    <div class="rx-icon">
        <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol" style="margin-bottom: 5px" :label="i18n('portalMobile.backgroundType','背景类型')">
            <a-radio-group v-model="raSystem" @change="radioChange">
                <a-radio value="lineage"> {{i18n('portalMobile.system','系统')}}</a-radio>
                <a-radio value="custom">{{i18n('portalMobile.custom','自定义')}}</a-radio>
            </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol" style="margin-bottom: 5px" :label="i18n('portalMobile.backgroundColor','背景颜色')">
            <div class="InsPortaMobileIconfont-back" v-if="raSystem!='custom'">
                <div v-for="(itme,index) in backgroundList" :key="index" :style="{'background-image':itme}"
                     @click="backgroundClick(itme)" class="InsPortaMobileIconfont-back-common">
                    <my-icon v-show="itme==raBgColor" type="icondui"></my-icon>
                </div>
            </div>
            <div v-else>
                <a-input style="width: 100px" v-model="raBgColor" type="color" :placeholder="i18n('portalMobile.backgroundColor','背景颜色')"/>
            </div>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol" style="margin-bottom: 5px"
                           :label="iconType=='app'?i18n('portalMobile.selectAppIcon','选择图标'):i18n('portalMobile.selectIcon','选择图标')">
            <a-button class="InsPortaMobileIconfont-user-iconfont" @click="chooseIcon()"
                 :style="style">
                <mb-icon v-if="iconType =='app'" :type="curIcon" ></mb-icon>
                <template v-else-if="localIcon">
                    <my-icon v-if="localIcon.type=='jpaasIcon'" :type="localIcon.icon"></my-icon>
                    <a-icon v-else :type="localIcon.icon"></a-icon>
                </template>
            </a-button>
        </a-form-model-item>
        <icon-selector-modal ref="modal" @ok="setIcon"/>
    </div>
</template>

<script>
import {Util} from "@lowcode/jpaas-common-lib";
import InsMobileIconDialog from "@/views/modules/portal/core/InsMobileIconDialog";
import IconSelectorModal from "@/views/modules/system/core/IconSelectorModal";
import {RxUseIcon} from "@lowcode/jpaas-common-lib"

export default {
    name: "rx-icon",
    props: {
        'system': {
            default: 'lineage'
        },
        'bgColor': {
            default:'linear-gradient(0deg,#2b76f3 0%,#6db6fb 100%)'
        },
        'icon': {},
        //app or custom
        "iconType": {
            default: 'app'
        }
    },
    components:{
        IconSelectorModal,
        RxUseIcon
    },
    data() {
        return {
            defaultType:['customIcon','userCustomIcon','jpaasIcon'],
            backgroundList: ['linear-gradient(0deg,#ec9721 0%, #f3cb51 100%)',
                'linear-gradient(0deg,#f3552b 0%,#fc8b76 100%)',
                'linear-gradient(0deg,#20bb78 0%,#85e7a1 100%)',
                'linear-gradient(0deg,#2b76f3 0%,#6db6fb 100%)',
                'linear-gradient(0deg, #fe7f5f 0%,#feb079 100%)',
                'linear-gradient(0deg,#08beb5 0%,#50dda1 100%)',
                'linear-gradient(0deg,#7598ff 0%,#8c94ff 100%)',
                'linear-gradient(0deg,#9529e1 0%,#e76ff3 100%)',
                'linear-gradient(0deg,#fe6c89 0%,#ffc1a0 100%)',
                'linear-gradient(0deg,#2f3aff 0%,#6a73fd 100%)',
                'linear-gradient(0deg,#535fe6 0%,#6ddbef 100%)'],
            raSystem: this.system,
            raBgColor: '',
            labelCol1: {span: 3},
            wrapperCol: {span: 19},
            type:'',
            curIcon:''
        }
    },
    created() {
        if(this.iconType == 'app'){
            this.curIcon = this.icon ;
        }else {
            this.curIcon = this.icon ? this.icon :'' ;
        }
    },
    mounted() {

    },
    computed:{
        style(){
            let obj = {
                lineHeight:this.iconType == 'app' ?'50px':'56px'
            }
            if(this.raSystem=='custom'){
                obj['background'] = this.raBgColor
            }else {
                obj['backgroundImage'] = this.raBgColor
            }
            return obj ;
        },
        localIcon(){
            if(this.curIcon){
                return JSON.parse( this.curIcon) ;
            }
            return "";
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"insPortalDef",key);
        },
        radioChange(v){
            if(this.iconType != 'app'){
                this.raSystem = v.target.value ;
                this.$emit("certainIcon", this.curIcon,this.raBgColor,this.raSystem)
            }
        },
        chooseIcon() {
            let self = this ;
            if(this.iconType=="custom"){
                this.$refs.modal.show()
            }else {
                let config = {
                    component: InsMobileIconDialog,
                    curVm: this,
                    widthHeight: ['810px', '600px'],
                    title: this.i18n('portalMobile.selectIconTitle','图标选择'),
                }
                Util.open(config, function (action) {

                    if(action == 'ok'){
                        self.curIcon = this.chooseicon ;
                        let  config = {
                            icon: this.chooseicon,
                        }
                        self.$emit("certainIcon", config)
                    }
                })
            }
        },
        setIcon(icon){
            let _icon = JSON.stringify(icon)
            this.curIcon = _icon;
            this.$emit("certainIcon", _icon,this.raBgColor,this.raSystem)
        },
        backgroundClick(itme) {
            if(this.iconType =='app'){
                var config = {
                    bgColor: itme,
                }
                this.$emit("certainIcon", config)
            }else {
                this.raBgColor = itme;
                let _icon = this.curIcon;
                this.$emit("certainIcon", _icon,itme,this.raSystem)
            }
        },
    },
    watch: {
        raSystem() {
            if(this.iconType =='app'){
                var config = {
                    system: this.raSystem,
                }
                if (this.raSystem == 'lineage') {
                    this.raBgColor = "linear-gradient(0deg,#2b76f3 0%,#6db6fb 100%)"
                } else {
                    this.raBgColor = "#1890ff";
                }
                this.$emit("certainIcon", config)
            }
        },
        bgColor:{
            handler:function (v,ov) {
                this.raBgColor = v ;
            },
            deep:true,
            immediate:true
        },
        raBgColor(v,ov) {
            if(this.iconType =='app'){
                var config = {
                    bgColor: this.raBgColor,
                }
                this.$emit("certainIcon", config)
            }
        },
        icon(v,ov){
            if(this.iconType=="custom"){
                this.curIcon = v ;
            }
        }
    }
}
</script>

<style scoped>
.InsPortaMobileIconfont-back {
    display: flex;
    width: 100%;
}

.InsPortaMobileIconfont-back-common {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 31px;
}

.InsPortaMobileIconfont-back-common i {
    color: white;
}

.InsPortaMobileIconfont-back-common {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 31px;
}

.InsPortaMobileIconfont-back-common i {
    color: white;
}

.InsPortaMobileIconfont-back-common i {
    color: white;
}

.InsPortaMobileIconfont-user-iconfont {
    width: 50px;
    height: 50px;
    color: white;
    line-height: 50px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.InsPortaMobileIconfont-user-iconfont i {
    font-size: 27px;
}
</style>
